<template>
  <div class="container">
    <TopCard v-if="getCard" :card="tabCard" />
    <div class="tabs-content g-box-container">
      <p-tabs size="large" :animated="false" default-active-key="1" @change="changeCallBack">
        <p-tab-pane key="1" tab="我的待办">
          <MyAgent :key-tabs="tabKey" :lodding="lodding" />
        </p-tab-pane>
        <p-tab-pane key="2" tab="我的申请">
          <MyApplication :key-tabs="tabKey" :lodding="lodding" />
        </p-tab-pane>
        <p-tab-pane key="3" tab="我参与的">
          <MyParticipace :key-tabs="tabKey" :lodding="lodding" />
        </p-tab-pane>
      </p-tabs>
    </div>
  </div>
</template>
<script>
import TopCard from './components/topCard.vue';
import MyAgent from './components/myAgent.vue';
import MyApplication from './components/myApplication.vue';
import MyParticipace from './components/myParticipace.vue';

import { getDataOverview } from '@/api/workbBench.js';

export default {
  components: {
    TopCard,
    MyAgent,
    MyApplication,
    MyParticipace,
  },
  data() {
    return {
      tabKey: '',
      dataSourceOne: [],
      dataSourceTwo: [],
      dataSourceThree: [],
      tabCard: []
    };
  },
  computed: {
    getCard() {
      return Object.keys(this.tabCard).length
    }
  },
  watch: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.myDataInfo();
    },
    // 我的数据
    async myDataInfo() {
      const res = await getDataOverview();
      this.tabCard = res?.data?.data
    },
    // 切换tabs
    changeCallBack(val) {
      this.tabKey = val;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .tabs-content {
    margin-top: 10px;
    height: calc(100% - 130px);
    /deep/.poros-tabs .poros-tabs-large-bar .poros-tabs-tab {
      padding: 12px 5px 13px 20px;
      margin: 0;
    }
  }
  /deep/ .poros-tabs-nav .poros-tabs-tab-active {
    color: #1740dc;
  }
  /deep/.poros-tabs-ink-bar {
    left: 20px;
    width: 56px !important;
  }
}
</style>
